<template>
    <div class="w1200 hospital_page">

        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <el-breadcrumb-item>口腔百科</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 筛选区域 开始 -->
        <div class="filter_box">
            <div class="cell_box">
                <div class="name">项目类型：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="projectId == '' ? 'cell_active' : ''" @click="searchHospital('', 'titleId')">全部
                    </div>
                    <div class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`type_${index}`" @click="searchHospital(item.id, 'projectId')">{{ item.name }}</div> -->
                    <!-- <nuxt-link :to="`/baike?orderRule=${orderRule}&projectId=&pageNumber=${orderRule || projectId?1:pageNumber}`" class="cell" :class="projectId == '' ? 'cell_active' : ''" replace>全部</nuxt-link> -->
                    <nuxt-link :to="`/baike?projectId=${item.id}&orderRule=${orderRule}`" class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`project_${index}`" replace>{{ item.name }}</nuxt-link>
                    
                </div>
            </div>
            <div class="cell_box">
                <div class="name">排序规则：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="combinedId == item.value ? 'cell_active' : ''" v-for="(item, index) in combinedList" :key="`type_${index}`" @click="searchHospital(item.value, 'combinedId')">{{ item.text }}
                    </div> -->
                    <nuxt-link :to="`/baike?projectId=${projectId}&orderRule=${item.value}`" class="cell" :class="orderRule == item.value ? 'cell_active' : ''" v-for="(item, index) in combinedList" :key="`combined_${index}`" replace>{{ item.text }}</nuxt-link>
                </div>
            </div>
        </div>
        <!-- 筛选区域 end -->

        <!-- 内容 开始 -->
        <div class="content">

            <!-- 左侧内容 开始 -->
            <div class="left_box">

                <!-- 列表 开始 -->
                <div class="hospital_list">
                    <template v-if="baikeList && baikeList.length">
                        <div class="list_doctor" v-for="(item, index) in baikeList" :key="`goods_${index}`">
                            <Baike :info="item" />
                        </div>
                    </template>
                </div>
                <!-- 列表 end -->

                <!-- 分页 开始 -->
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :current-page="pageNumber" :total="total" @current-change="changePage">
                    </el-pagination>
                </div>
                <!-- 分页 end -->

            </div>
            <!-- 左侧内容 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 社区问题 开始 -->
                <div class="problem_box">
                    <div class="head">社区问题</div>
                    <div class="list_box">
                        <ListQuestion v-for="(item, index) in questionList" :key="`problem_${index}`" :info="item" :index="index" />
                    </div>
                </div>
                <!-- 社区问题 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->



    </div>
</template>
<script>
import { PLATFORM_TYPE,GET_ORALCAVITY_BAIKE_SEARCH,GET_SEO_SETTING_INFO,GET_BAIKE_CLASS_OPTIONS,GET_QUESTIONANSWER_SEARCH,GET_HOSPITAL_PROJECT_OPTIONS  } from "@/http/interface";
import qs from 'qs';
import Settlement from '@/components/apply/index.vue'
import Goods from '@/components/goods/index.vue'
import Hospital from '@/components/hospital/index.vue';
import Baike from '@/components/baike/index.vue'
import ListQuestion from '@/components/question/listCell.vue'
export default {
    components: {
        Goods,
        Settlement,
        Hospital,
        Baike,
        ListQuestion
    },
    data() {
        return {
            projectList: [],
            combinedList: [
                { text: "默认排序", value: 1 },
                { text: "热度高低", value: 2 },
            ],
            orderRule: '',
            projectId: '',
            baikeList: [],
            total: 0,
            pageNumber: 1,
            seoInfo: {}
        }
    },
    head() {
        return {
            title: this.seoInfo.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.seoInfo.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.seoInfo.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/baike/list`
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/baike`}
      ]
        };
    },
    watchQuery: true,
    async asyncData({ query, $axios }) {
        let pageNumber = Number(query.pageNumber || 1);

        // 擅长项目
        let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
        let projectList = [{name:'全部',id:''}].concat(pro.data || [])

        // 百科列表
        let params = { pageSize: 10 }
        params.pageNumber = pageNumber
        params.orderRule = query.orderRule
        params.projectId = query.projectId
        let hes = await $axios.get(GET_ORALCAVITY_BAIKE_SEARCH, { params: params })
        let obj = hes.data || {}
        let baikeList = obj.list || []

        // 社区问答
        let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
        let qbj = qes.data || {}
        let questionList = qbj.list || []


        // 获取seo配置
        let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 7, platform: PLATFORM_TYPE } })
        let seoInfo = seo.data || {}

        return {
            projectList,
            baikeList,
            total: obj.totalElements,
            pageNumber,
            questionList,
            orderRule: query.orderRule || '',
            projectId: query.projectId || '',
            //hospitalList,
            seoInfo
        }
    },
    methods: {
        // 切换分页
        changePage(e) {
            this.pageNumber = e;
            this.navigateToPage()
        },

        // 切换筛选条件
        searchHospital(e, id) {
            this[id] = e
            this.navigateToPage()
        },

        // 切换路由
        navigateToPage() {
            let query = this.$route.query
            let o = { pageNumber: this.pageNumber }
            if (this.combinedId) {
                o.combinedId = this.combinedId
            }
            if (this.projectId) {
                o.projectId = this.projectId
            }
            o.random = Math.random()
            let _path = `/baike?${qs.stringify(o)}`
            this.$router.replace({
                path: _path
            })
            //this.$routerReplace(o)
        },
    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/baike/index.less';
</style>